// title中隐藏二维码
$("#title-xl").on("mouseenter", function () {
    $("#title-hide").css("height", "160px")
        .css("transition", "all 0.3s");
})
$("#title-hide").on("mouseenter", function () {
    $("#title-hide").css("height", "160px")
        .css("transition", "all 0.3s");
})
$("#title-xl").on("mouseleave", function () {
    $("#title-hide").css("height", "0px");
})
$("#title-hide").on("mouseleave", function () {
    $("#title-hide").css("height", "0px");
})
// 导航栏隐藏部分
// 全部产品
$("#qucp").on("mouseenter", function () {
    $("#qbcp-hide").css("opacity", 1)
        .css("transition", "all 0.3s")
        .css("display", "block");
})
$("#qbcp-hide").on("mouseenter", function () {
    $("#qbcp-hide").css("opacity", 1)
        .css("transition", "all 0.3s")
        .css("display", "block");
})
$("#qucp").on("mouseleave", function () {
    $("#qbcp-hide").css("opacity", 0)
        .css("display", "none");
})
$("#qbcp-hide").on("mouseleave", function () {
    $("#qbcp-hide").css("opacity", 0)
        .css("display", "none");
})

// 家用
$("#jy").on("mouseenter", function (e) {
    $(".jy-hide").css("opacity", 1)
        .css("transition", "all 0.3s")
        .css("display", "block");
})
$(".jy-hide").on("mouseenter", function () {
    $(".jy-hide").css("opacity", 1)
        .css("transition", "all 0.3s")
        .css("display", "block");
})
$("#jy").on("mouseleave", function () {
    $(".jy-hide").css("opacity", 0)
        .css("display", "none");
})
$(".jy-hide").on("mouseleave", function () {
    $(".jy-hide").css("opacity", 0)
        .css("display", "none");
})

// 服务支持
$("#fwzc").on("mouseenter", function (e) {
    $(".fwzc-hide").css("opacity", 1)
        .css("transition", "all 0.3s")
        .css("height", "247px")
        .css("display", "block");
})
$(".fwzc-hide").on("mouseenter", function () {
    $(".fwzc-hide").css("opacity", 1)
        .css("transition", "all 0.3s")
        .css("height", "247px")
        .css("display", "block");
})
$("#fwzc").on("mouseleave", function () {
    $(".fwzc-hide").css("opacity", 0)
        .css("display", "none");
})
$(".fwzc-hide").on("mouseleave", function () {
    $(".fwzc-hide").css("opacity", 0)
        .css("display", "none");
})


// 轮播部分
var swiperWidth = 1913;

var imgs = ["img/lb1.jpg", "img/lb2.jpg", "img/lb3.jpg", "img/lb4.jpg", "img/lb1.jpg"];

for (var i = 0; i < imgs.length; i++) {
    $("<img>")
        .attr("src", imgs[i])
        .css("left", i * swiperWidth + "px")
        .appendTo($("#container"));
}

for (var i = 0; i < imgs.length - 1; i++) {
    $("<div></div>")
        .addClass("dot")
        .attr("index", i)
        .appendTo($("#ctrl"));
}

// jq对象的.eq方法，取出jq对象中的第n个元素对象并封装为一个jq对象
$(".dot").eq(0).addClass("highlighted");
// ****************************************************
// 使用一个变量记录当前显示第几张图片
var currentIndex = 0;

// 切换到下一页
function nextPage() {
    $(".dot").eq(currentIndex).removeClass("highlighted");
    currentIndex++;
    currentIndex = currentIndex % imgs.length;
    $(".dot").eq(currentIndex).addClass("highlighted");
    var left = -1920 * currentIndex;
    $("#container").css("left", left + "px");
}

// 上一页
function prevPage() {
    $(".dot").eq(currentIndex).removeClass("highlighted");
    currentIndex--;
    if (currentIndex < 0) {

        currentIndex = imgs.length - 2;
    }
    $(".dot").eq(currentIndex).addClass("highlighted");
    var left = -1920 * currentIndex;
    $("#container").css("left", left + "px");
}

// 轮播定时器
var timer;
function startRunning() {
    timer = setInterval(function () {
        nextPage();
    }, 2000);
}
startRunning();

// transitionstart，过渡动画开始时触发
$("container").on("transitionstart", function () {
    // console.log("开始了");
    $("#right").off("click", nextPage);

})

// transitionend事件，当元素过渡动画结束时触发。
$("#container").on("transitionend", function () {
    $("#right").on("click", nextPage);
    // console.log("过渡结束了");
    if (currentIndex == imgs.length - 1) {
        // console.log("最后一张");

        // 先关闭动画
        $("#container").removeClass("ani");
        // 回到第0张
        $("#container").css("left", 0 + "px");
        currentIndex = 0;
        $(".dot").eq(currentIndex).addClass("highlighted");

        // 开启动画
        setTimeout(() => {
            $("#container").addClass("ani");
        }, 200);
    }
});

// 鼠标指针进入轮播图时，停止自动播放
$("#swiper").on("mouseenter", function () {
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
    $("#left").css("left", "350px")
        .css("transition", "all 0.3s")
        .css("display", "block");
    $("#right").css("right", "250px")
        .css("transition", "all 0.3s")
        .css("display", "block");
});

// 鼠标指针离开轮播图时
$("#swiper").on("mouseleave", function () {
    if (!timer) {
        startRunning();
    }
    $("#left").css("left", "350px")
        .css("transition", "all 0.3s")
        .css("display", "none");
    $("#right").css("right", "250px")
        .css("transition", "all 0.3s")
        .css("display", "none");
})

// 点击事件
$(".dot").on("click", function () {
    // $(this).attr("index")
    $(".dot").eq(currentIndex).removeClass("highlighted");
    currentIndex = $(this).attr("index") * 1;
    $(".dot").eq(currentIndex).addClass("highlighted");
    var left = -1920 * currentIndex;
    $("#container").css("left", left + "px");
})

$("#right").on("click", nextPage);
$("#left").on("click", prevPage);

// 底部input
$("#email").on("click",function(){
    $("#email").css("box-shadow","0 0 3px #78bc27");
})
// 固定
$("#flex-gm").on("mouseenter",function(){
$("#flex-1")
.css("display","block");
})
.on("mouseleave",function(){
$("#flex-1")
.css("display","none");
});
$("#flex-1").on("mouseenter",function(){
$("#flex-1")
.css("display","block");
})
.on("mouseleave",function(){
$("#flex-1")
.css("display","none");
});
$("#flex-phone").on("mouseenter",function(){
$("#flex-2")
.css("display","block");
})
.on("mouseleave",function(){
$("#flex-2")
.css("display","none");
});
$("#flex-2").on("mouseenter",function(){
$("#flex-2")
.css("display","block");
})
.on("mouseleave",function(){
$("#flex-2")
.css("display","none");
});

